<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Marry Christmas</title>
    <style>
        body {
            font-size: 20px;
            text-align: center;
            margin: 0;
            background-color: #ff5131;
        }

        label {
            position: fixed;
            bottom: 0;
            left: 0;
            font-size: 10px;
        }

        button {
            font-size: 18px;
            color: #fff;
            padding: 0 30px;
            height: 2.3rem;
            background: #8fd16f;
            border: 0;
            border-radius: 20px;
        }

        #cvs {
            display: none;
            margin: 0 auto;
        }

        #export {
            display: none;
            margin: 0 auto;
            width: 250px;
            height: 250px;
        }

        .header {
            color: #8fd16f;
            height: 3rem;
        }

        .canvas-container {
            margin: 0 auto;
        }

        .hat-hide,
        #exportBtn {
            display: none;
        }

        .body {
            margin: 4rem auto 3rem;
            height: 10rem;
            width: 10rem;
            border: solid 1px #aaa;
            box-shadow: 0 0 5px #aaa;
            border-radius: 1rem;
            line-height: 10rem;
            position: relative;
        }

        .footer {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="body" id="uploadContainer">
        <small id="uploadText">上传头像添加圣诞帽</small>
        <input id="upload" type="file" onchange="viewer()"
            style="height: 10rem; width: 10rem; position: absolute; top: 0; left: 0; opacity: 0">
    </div>
    <img id="export" src="">
    <canvas id="cvs"></canvas>
    <p id="tip" style="opacity: 0">
        点击调整位置和大小<br>右下角point向左移动翻转圣诞帽
    </p>
    <div class="footer">
        <button id="change" onclick="changeHat()" style="display: none;">换个样式</button>
        <button id="exportBtn" onclick="exportFunc()">生成头像</button>
    </div>
    <div style="display: none">
        <img id="img" src="" alt="">
        <img class="hat-hide" id="hat01" src="./img/hat.01.png">
        <img class="hat-hide" id="hat02" src="./img/hat.02.png">
        <img class="hat-hide" id="hat03" src="./img/hat.03.png">
        <img class="hat-hide" id="hat04" src="./img/hat.04.png">
        <img class="hat-hide" id="hat05" src="./img/hat.05.png">
        <img class="hat-hide" id="hat06" src="./img/hat.06.png">
        <img class="hat-hide" id="hat07" src="./img/hat.07.png">
        <img class="hat-hide" id="hat08" src="./img/hat.08.png">
        <img class="hat-hide" id="hat09" src="./img/hat.09.png">
        <img class="hat-hide" id="hat10" src="./img/hat.10.png">
        <img class="hat-hide" id="hat11" src="./img/hat.11.png">
        <img class="hat-hide" id="hat12" src="./img/hat.12.png">
        <img class="hat-hide" id="hat13" src="./img/hat.13.png">
        <img class="hat-hide" id="hat14" src="./img/hat.14.png">
        <img class="hat-hide" id="hat15" src="./img/hat.15.png">
    </div>
    <script src="./js/fab.min.js"></script>
    <script>
        var cvs = document.getElementById("cvs")
        var ctx = cvs.getContext("2d")
        var exportImage = document.getElementById("export")
        var img = document.getElementById("img")

        const hatList = document.getElementsByClassName("hat-hide")
        var currentHat = document.getElementById("hat02");

        var canvasFabric;
        var hatInstance;
        var screenWidth = window.screen.width < 500 ? window.screen.width : 300;

        function viewer() {
            var file = document.getElementById("upload").files[0];
            console.log(file);
            var reader = new FileReader;
            if (file) {
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    img.src = reader.result;
                    img.onload = function () {
                        img2Cvs(img)
                    }
                }
            } else {
                img.src = ""
            }
        }
        function img2Cvs(img) {
            cvs.width = img.width;
            cvs.height = img.height;
            cvs.style.display = "block";
            canvasFabric = new fabric.Canvas("cvs", {
                width: screenWidth,
                height: screenWidth,
                backgroundImage: new fabric.Image(img, {
                    scaleX: screenWidth / img.width,
                    scaleY: screenWidth / img.height
                })
            });
            changeHat();
            document.getElementById("uploadContainer").style.display = "none";
            document.getElementById("uploadText").style.display = "none";
            document.getElementById("upload").style.display = "none";
            document.getElementById("change").style.display = "block";
            document.getElementById("exportBtn").style.display = "block";
            document.getElementById("tip").style.opacity = 1
        }
        function changeHat() {
            if (currentHat != null) {
                const oldHat = currentHat;
                oldHat.style.display = "none";
            }
            const newHat = hatList[randomNum(0, hatList.length)]
            currentHat = newHat
            newHat.style.display = "block";
            if (hatInstance) {
                canvasFabric.remove(hatInstance)
            }
            hatInstance = new fabric.Image(newHat, {
                top: 40,
                left: screenWidth / 3,
                scaleX: 100 / newHat.width,
                scaleY: 100 / newHat.height,
                cornerColor: "#0b3a42",
                cornerStrokeColor: "#fff",
                cornerStyle: "circle",
                transparentCorners: false,
                rotatingPointOffset: 30
            });
            hatInstance.setControlVisible("bl", false);
            hatInstance.setControlVisible("tr", false);
            hatInstance.setControlVisible("tl", false);
            hatInstance.setControlVisible("mr", false);
            hatInstance.setControlVisible("mt", false);
            canvasFabric.add(hatInstance)
        }
        function exportFunc() {
            document.getElementsByClassName("canvas-container")[0].style.display = "none";
            document.getElementById("exportBtn").style.display = "none";
            document.getElementById("tip").innerHTML = "长按图片保存或分享";
            document.getElementById("change").style.display = "none";
            cvs.style.display = "none";
            exportImage.style.display = "block";
            exportImage.src = canvasFabric.toDataURL({
                width: screenWidth,
                height: screenWidth
            })
        }
        function randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        } 
    </script>
</body>